
{% block content %}

<div>

<h3 class="float_left" >Iterations by Projects</h3>
<div class="float_right">
<!-- <label for="id_assigned_to">Assigned to:</label> -->
<select id="projects_" class="select ui-widget-content ui-corner-all">
    {% for project in projects %}
    <option value="{{ project.key.id }}">{{ project.name }}</option>
    {% endfor %}
</select>
</div>
</div>
{% for iteration in iterations %}
<div id ="title-container" class="clearboth">
    <h2><a href="/?id_it={{iteration.key.id}}" class="index_content">{{ iteration.name }}</a></h2>
    <div>
        <span>
            Project&nbsp;<a href="/iterations?project_id={{ iteration.get_project.key.id }}"
                            title="List all iterations" class="index_content">{{ iteration.get_project.name }}</a></span>
        |
        <span>Status: <span id="id_status">{{ iteration.status }}</span></span>
        |
        <span>{{ iteration.start_date|date:"D, M j, Y" }}</span>
        <span>-</span>
        <span>{{ iteration.end_date|date:"D, M j, Y" }}</span>
        <span class="float_right">
<!--            <span id="id_create_event" class="link">Create Event</span>
            <a href="/calendar_events" class="index_content">Calendar Events</a>-->
            <span>
                <a href="/iteration_form?id={{ iteration.key.id}}" id="id_close_link">Edit</a>
            </span>
            <span class="it_control" id="{{iteration.key.id}}" val="{{iteration.status}}">
            <span class="itCtrl link it_start_"  val="Active" >Start</span>
            <span class="itCtrl link it_close_"   val="Closed">Close</span>
            <span class="itCtrl link it_reactive_" val="Active">Reactive</span>
            </span>
            <span><a href="/stories_backlog?id={{iteration.key.id}}" class="index_content">Review</a></span>
            <span><a href="/iteration_planning?id={{iteration.key.id}}" class="index_content">Planning</a></span>
        </span>
    </div>
    <div >
    </div>
</div>
<div id="story-contain" class="ui-widget">
    <table>
        <col width="50%" />
        <col width="50%" />
        <thead>
            <tr>
                {% with iteration.count_stories as total_stories %}
                <th>
                    <div class="col_label ui-widget-content ui-widget-header border_w ui-state-default _ui-corner-all">
                        <div class="column_title">
                            <span>Done</span>
                        </div>
                        <div class="column_detail">
                            <span>{{ iteration.count_closed_stories }}/{{ total_stories }}</span>
                        </div>
                    </div>
                </th>
                <th>
                    <div class="col_label ui-widget-content ui-widget-header border_w ui-state-default _ui-corner-all">
                        <div class="column_title">
                            <span>Progress</span>
                        </div>
                        <div class="column_detail">
                            <span>{{ iteration.count_active_stories }}/{{ total_stories }}</span>
                        </div>
                        <div class="float_right plus_task">
                            <span id="id_add_story_{{iteration.key.id}}" id_it="{{iteration.key.id}}" title="Add new task"class="ui-icon ui-icon-plusthick cursor_pointer"></span>
                        </div>
                    </div>
                </th>
                {% endwith %}
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="ui-widget-content_ _ui-corner-all" valign="top">
                    {% for story in iteration.get_closed_stories %}
                    <div class="body ui-widget-content ui-corner-all">
                        <div class="story">
                            {% with story.key.id as id_story %}
                            <div>
                                <a href="/story?id={{ id_story }}" class="index_content"> {{ story.name|escape }}</a>
                            </div>
                            <div class="column_detail" >
                                <span>{{ story.category }}</span> |
                                <span>{{ story.priority }}</span> |
                                <span>{{ story.assigned_to }}</span> |
                                <span>{{ story.estimated_time }}</span>
                            </div>
                            <div id="id_pb_{{ id_story }}" val="{{story.percentage}}"></div>
                            {% endwith %}
                        </div>
                    </div>
                    {% endfor %}
                </td>
                <td id="id_act_stories_{{iteration.key.id}}" class="ui-widget-content_ _ui-corner-all" valign="top">
                    {% for story in iteration.get_active_stories %}
                    <div class="body ui-widget-content ui-corner-all">
                        <div class="story">
                            {% with story.key.id as id_story%}
                            <div class="ui-state-highlight_ ui-state-active_ _ui-widget-header ui-corner-top name">
                                <a href="/story?id={{ id_story }}" class="index_content"> {{ story.name|escape }}</a>
<!--                                <span id="{{ id_story }}" class="cursor_pointer link story"> {{ story.name|escape }}</span>-->
                            </div>
                            <div class="column_detail" >
                                <span>{{ story.category }}</span> |
                                <span>{{ story.priority }}</span> |
                                <span id="id_status_{{id_story}}" val="{{ id_story }}">{{ story.status }}</span> |
                                <span id="id_assigned_to_{{id_story}}" val="{{ story.assigned_to }}">{{ story.assigned_to }}</span> |
                                <span id="label_time_{{id_story}}">{{ story.estimated_time }}</span>
                            </div>
                            <div id="id_pb_{{ id_story }}" val="{{story.percentage}}"></div>
                            <div class="story_controls" val="{{story.status}}" usr="{{story.contains_current_user}}" id="id_str_ctrl{{id_story}}">
                                <span id="id_assign_{{id_story}}" val="{{ id_story }}" idIt="{{iteration.key.id}}" title="Assign" class="ui-icon ui-icon-person cursor_pointer float_left icon_action"></span>
                                <span id="id_resolve_{{id_story}}" val="{{ id_story }}" title="Resolve" class="ui-icon ui-icon-check cursor_pointer float_left icon_action"></span>
                                <span id="id_time_{{id_story}}" val="{{ id_story }}" title="Time" class="ui-icon ui-icon-clock cursor_pointer float_left icon_action"></span>
                                <span id="id_reactive_{{id_story}}" val="{{ id_story }}" title="Reactive" class="ui-icon ui-icon-folder-open cursor_pointer float_left icon_action"></span>
                                <span id="id_close_{{id_story}}" val="{{ id_story }}" title="Close" class="ui-icon ui-icon-power cursor_pointer float_left icon_action"></span>
                                <span id="id_move_{{id_story}}" val="{{ id_story }}" title="Move" class="ui-icon ui-icon-transferthick-e-w cursor_pointer float_left icon_action"></span>
                                <span id="id_edit_{{id_story}}" val="{{ id_story }}" id_it="{{iteration.key.id}}" id_st="{{ id_story }}" title="Edit" class="ui-icon ui-icon-pencil cursor_pointer float_left icon_action"></span>
                                <span id="id_comment_{{id_story}}" val="{{ id_story }}" title="Comment" class="ui-icon ui-icon-comment cursor_pointer icon_action"></span>
                            </div>
                            {% endwith %}
                        </div>
                    </div>
                    {% endfor %}
                </td>
            </tr>
        </tbody>
    </table>
</div>

<select id="id_users_{{iteration.key.id}}" class="hide">
    {% for member in iteration.get_project.get_members %}
    <option value="{{ member.key.id }}">{{ member.user.nickname }}</option>
    {% endfor%}
</select>

{% endfor %}

<div id="dialog_story_form" class="form_container tmp_dialog" title="Create new Task">
</div>

<div id="dialog_event_form" class="form_container tmp_dialog" title="Create new event">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/reqajax/create_event" method="post">
        <input type="hidden" name="iteration_id" value="14">
        <fieldset>
            <ol>
                <li>
                    <label for="id_title">Title:</label>
                    <input id="id_title" type="text" class="text ui-widget-content ui-corner-all" name="title" size="50">
                </li>
                <li>
                    <label for="id_date">Date:</label>
                    <input id="id_date" class="text ui-widget-content ui-corner-all" name="date">
                </li>
                <li>
                    <label for="id_location">Location:</label>
                    <input id="id_location" class="text ui-widget-content ui-corner-all" name="location">
                </li>
                <li>
                    <label for="id_event_attendees">Description:</label>
                    <select name="event_attendees" id="id_event_attendees" multiple="true" class="select ui-widget-content ui-corner-all">
                      <option value="ram.rioja@gmail.com">r@m - ram.rioja@gmail.com</option>
                      <option value="sis_rioja@cs.umss.edu.bo">sis_rioja@cs.umss.edu.bo</option>
                      <option value="jesusgeryck@hotmail.com">jesusgeryck@hotmail.com</option>
                      <option value="mika_antezana@yahoo.com">mika_antezana@yahoo.com</option>
                      <option value="jmlagras@hotmail.com">Jose Maria - jmlagras@hotmail.com</option>
                      <option value="rolo.bm@gmail.com">rolo.bm@gmail.com</option>
                    </select>
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea id="id_description" rows="5" cols="50" name="description" class="text ui-widget-content ui-corner-all"> </textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>

<div id="assign_form" class="form_container tmp_dialog" title="Assign" >
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/reqajax/assign_form_index" method="post" id="assignForm">
        <input type="hidden" name="story_id" value="">
        <fieldset>
            <ol>
                <li>
                    <label for="id_assigned_to">Assigned to:</label>
                    <select name="assigned_to" id="id_assigned_to" class="select ui-widget-content ui-corner-all">
                    </select>
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>

<div id="resolve_form" title="Change status" class="form_container tmp_dialog">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/reqajax/change_story_status_index" method="post" id="resolveForm">
        <input type="hidden" name="story_id" value="">
        <fieldset>
            <ol>
                <li class='slct_sts'>
                    <label for="id_status">Status:</label>
                    <select name="status" id="id_status" class="select ui-widget-content ui-corner-all">
                        <option value="Implemented">Implemented</option>
                        <option value="Fixed">Fixed</option>
                        <option value="No Reproducible">No Reproducible</option>
                        <option value="Duplicated">Duplicated</option>
                    </select>
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>

<div id="time_form" class="form_container tmp_dialog" title="Reopen">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/reqajax/update_time_worked_index" method="post" id="timeForm">
        <input type="hidden" name="story_id" value="">
        <fieldset>
            <ol>
                <li>
                    <label for="name">Time</label>
                    <input type="text" name="time" id="id_elapsed_time" class="text ui-widget-content ui-corner-all">
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>

<div id="comment_form" class="form_container tmp_dialog" title="Comment">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/reqajax/comment_story_index" method="post" id="commentForm">
        <input type="hidden" name="story_id" value="">
        <fieldset>
            <ol>
                <li>
                    <label for="id_comment">Comment:</label>
                    <textarea  cols="50" rows="5" id="id_comment" name="comment" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<style>
  .ui-menu { width: 150px; }
  </style>
<script type="text/javascript">
    $(document).ready(function(){
        // $(function() {
        //     $( "#menu" ).menu();
        // });
        var current_user = '{{current_user}}';
        updateStoryPb = function( selector ) {
            $( selector ).each(function() {
                var percentage = parseFloat($(this).attr('val'));
                $(this).progressbar({value:percentage});
            });
        };
        updateStoryPb( 'div:[id^=id_pb_]' );

        
        $( 'a.index_content' ).click( function( event ) {
            console.log('recargando........................index main')
            event.preventDefault();
            var url = $( this ).attr('href');
            loadContent( url );
        });
        
        var elapsed_time = $( "#id_elapsed_time" );
        $( 'form input[type=text]' ).keydown(function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });

        $( "#time_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var valid = true;
                    allFields.removeClass( "ui-state-error" );
                    valid = valid && checkRegexp( elapsed_time, /^[+-]?\d+(\.\d+)?$/i, "Elapsed time must be a number." );
                    if (valid) {
                        var $form = $( '#timeForm' ),
                        url = $form.attr( 'action' ),
                        id_story = $form.find( 'input[name="story_id"]' ).val(),
                        data = $form.serialize();
                        $.ajax({
                            type: 'POST',
                            url: url,
                            dataType: 'json',
                            data: data,
                            success: function(data) {
                                //update_time
                                //$("#id_pb_"+id_story).progressbar({value: data.percentage});
                            },
                            error: function (data) {
                                showErrorMsg(data.responseText);
                            }
                        });
                        $( this ).dialog( "close" );
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        timeListener = function ( selector ) {
            $( selector ).click(function(event) {
                event.preventDefault();
                var id_story = $( this ).attr('val');
                $( '#timeForm' ).find( 'input[name="story_id"]' ).val(id_story);
                $( "#time_form" ).dialog( "open" );
            });
        };
        timeListener( 'span:[id^=id_time_]' );
        

        $( "#assign_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $('#assignForm'),
                    url = $form.attr( 'action' ),
                    id_story = $form.find( 'input[name="story_id"]' ).val(),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            console.log('success:'+data);
                            // console.log('assing data');
                            // console.log(data);
                            // $('#id_assigned_to_' + id_story).text(data.assigned_to);
                            // $('#id_assigned_to_' + id_story).attr('val', data.assigned_to);
                            //showControl(data.current_user);
                            // var obj = $('#id_str_ctrl'+data.id);
                            // updateStoryControls_(obj, data.status, 'True');
                            // timeControl(obj, current_user);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        assignListener = function ( selector ) {
            $( selector ).click(function(event) {
                event.preventDefault();
                var id_story = $( this ).attr('val'),
                id_iteration = $( this ).attr('idIt');
                var options = $( '#id_users_' + id_iteration ).children().clone();
                $( '#assignForm' ).find( 'input[name="story_id"]' ).val(id_story);
                $('#assignForm select[name="assigned_to"]').empty().append(options);
                $( "#assign_form" ).dialog( "open" );
            });
        };
        assignListener( 'span:[id^=id_assign_]' );

        $( "#resolve_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#resolveForm' ),
                    url = $form.attr( 'action' ),
                    id_story = $form.find( 'input[name="story_id"]' ).val(),
                    status = $form.find('select[name="status"]').val(),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            console.log('data status:'+status);
                            $( "#resolve_form" ).find('li.slct_sts').removeClass('hide');
                            $( "#resolve_form" ).find('select[name="status"]').append(new Option("Active", "Active"));
                            $("#resolve_form option[value='Active'], #resolve_form option[value='Closed']").remove();
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );

                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        resolveListener = function ( selector ) {
            $( selector ).click(function(event) {
                event.preventDefault();
                var id_story = $( this ).attr('val');
                $( '#resolveForm' ).find( 'input[name="story_id"]' ).val(id_story);
                $( "#resolve_form" ).dialog( "open" );
            });
        };
        resolveListener( 'span:[id^=id_resolve_]' );

        closeListener = function ( selector ) {
            $( selector ).click(function(event) {
                event.preventDefault();
                var id_story = $( this ).attr('val');
                var $form = $( '#resolve_form' );
                $form.find( 'input[name="story_id"]' ).val(id_story);
                $form.find('li.slct_sts').addClass('hide');
                $form.find('select[name="status"]').append(new Option("Close", "Closed"));
                $form.find('select[name="status"]').val("Closed");
                $form.dialog( "open" );
            });
        };

        closeListener( 'span:[id^=id_close_]' );
        reactiveListener = function ( selector ) {
            $( selector ).click(function(event) {
                event.preventDefault();
                var id_story = $( this ).attr('val');
                var $form = $( '#resolve_form' );
                $form.find( 'input[name="story_id"]' ).val(id_story);
                $form.find('li.slct_sts').addClass('hide');
                $form.find('select[name="status"]').append(new Option("Active", "Active"));
                $form.find('select[name="status"]').val("Active");
                $form.dialog( "open" );
            });
        };
        reactiveListener( 'span:[id^=id_reactive_]' );

        $('.itCtrl').click(function(event) {
            event.preventDefault();
            var iteration_id = $( this ).parent().attr('id'),
            status = $(this).attr( 'val' );
            $.ajax({
                type: 'POST',
                url: '/change_iteration_status',
                dataType: 'json',
                data: { iteration_id: iteration_id, status: status },
                success: function(data) {
                    $('#id_status').text(data.status);
                    updateItCtrls($( '#' + data.id ), data.status);
                }
            });
        });

        $( "#comment_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#commentForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize() + '&html=False';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            // var html = $(data.html).html();
                            // console.log('adddddddddddddddiiiiiiingggggggggggg');
                            // console.log(data.html);
                            // $('#events').prepend(html);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        commentListener = function ( selector ) {
            $( selector ).click(function(event) {
                event.preventDefault();
                var id_story = $( this ).attr('val');
                $( '#commentForm' ).find( 'input[name="story_id"]' ).val(id_story);
                $( "#comment_form" ).dialog( "open" );
            });
        };
        commentListener( 'span:[id^=id_comment_]' );
        var user_nickname = $('#id_current_user').attr('val');
        var cookie_id = user_nickname +'_IDP';
        var pj_cookie = getCookie(cookie_id);
        
        $('#projects_').val(pj_cookie);
        $('#projects_').change(function() {
            var val = $( this ).val();
            loadContent('/?id_pj='+val);
        });

        var name = $( "#id_name" ),
        estimated_time = $( "#id_estimated_time" ),
        description = $( "#id_description" ),
        tips = $( ".validate_tips" ),
        allFields = $( [] ).add( name ).add( estimated_time ).add( description );
        function updateTips( t ) {
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 5500 );
        }
        function checkLength( o, n, min ) {
            if ( o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips(  n + " is required." );
                return false;
            } else {
                return true;
            }
        }
        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
        function resetStoryForm() {
            tips.text('Fill out all form fields.');
            allFields.val( "" ).removeClass( "ui-state-error" );

        }
        $( "#dialog_story_form" ).dialog({
            autoOpen: false,
            height: 410,
            width: 600,
            modal: true,
            buttons: {
                "Save": function() {
                    // var valid = true;
                    // allFields.removeClass( "ui-state-error" );
                    // valid = valid && checkLength( name, "Name", 3 );
                    // valid = valid && checkRegexp( estimated_time, /^[+-]?\d+(\.\d+)?$/i, "Estimated time must be a number." );
                    // if (valid) {
                    var $form = $('#dialog_story_form form'),
                    url = $form.attr('action'),
                    id_iteration = $form.find('input[name="iteration_id"]').val(),
                    data = $form.serialize() + '&response=story_index';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            if (data.result == 'ok') {
                                var html = $(data.html).html();
                                $( '#id_act_stories_' + id_iteration ).append(html);
                                updateStoryPb( 'div:[id=id_pb_'+data.id+']' );
                                resolveListener( 'span:[id=id_resolve_'+ data.id+']' );
                                $( '#dialog_story_form' ).dialog( "close" );
                            } else {
                                var html = $(data.html).html();
                                $( '#dialog_story_form' ).empty();
                                $( '#dialog_story_form' ).append(html);
                            }
                        },
                        error: function (data) {
                            showErrorMsg(data);
                        }
                    });
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( '#dialog_story_form' ).empty();
            }
        });
        $( "span:[id^=id_add_story_], span:[id^=id_edit_]" ).click(function() {
            var id_iteration = $( this ).attr('id_it');
            var id_story = $( this ).attr('id_st');
            $.ajax({
                type: 'GET',
                url: '/reqajax/story_form',
                dataType: 'json',
                data: {'id': id_story, 'iteration_id': id_iteration},
                success: function(data) {
                     var html = $(data).html();
                     $( '#dialog_story_form' ).append(html);
                     $( "#dialog_story_form" ).dialog( "open" );
                },
                error: function (data) {
                    showErrorMsg(data.responseText);
                }
            });
        });

        $( "#dialog_event_form" ).dialog({
            autoOpen: false,
            height: 410,
            width: 600,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $('#dialog_event_form form'),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            console.log(data);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
            }
        });
        $( 'span:[id=id_create_event]' ).click(function(event) {
            event.preventDefault();
//            var id_story = $( this ).attr('val');
//            $( '#closeForm' ).find( 'input[name="story_id"]' ).val(id_story);
            $( "#dialog_event_form" ).dialog( "open" );
        });

        function updateControls(data) {
            if (data.status == 'Active') {
                $('#id_close').removeClass('hide');
                $('#id_reactive, #id_start').addClass('hide');
            } else {
                if (data.status == 'Closed') {
                    $('#id_reactive').removeClass('hide');
                    $('#id_start, #id_close').addClass('hide');
                }
            }
        }

        updateStoryControls_ = function (obj, status, is_collaborator) {
            var assign = obj.find('span:[id^=id_assign_]');
            var resolve_status = ['Implemented', 'Fixed', 'No Reproducible', 'Duplicated'];
            $('#status_label').text(status);
            if (is_collaborator == 'True') {
                if (status == 'Active') {
                    obj.find('span:[id^=id_resolve_], span:[id^=id_assign_], span:[id^=id_move_], span:[id^=id_edit_], span:[id^=id_comment_]').removeClass('hide');
                    obj.find('span:[id^=id_close_], span:[id^=id_reactive_], span.reopen_').addClass('hide');
                } else {
                    if (include(resolve_status, status)) {
                        obj.find('span:[id^=id_close_], span:[id^=id_reactive_], span:[id^=id_assign_]').removeClass('hide');
                        obj.find('span.reopen_').addClass('hide');
                    } else {
                        
                        if (status == 'Closed') {
                            $('#id_close_link, #id_reactive_link, #id_resolve_link,').addClass('hide');
                            $('#id_assign_link, #id_edit_link, #id_move_link, #id_comment_link').addClass('hide');
                            $('#id_reopen_link').removeClass('hide');
                            $( '#id_edit_description' ).addClass( 'hide' );
                        }
                    }
                }
            } else {
                //$('#id_resolve_link, #id_assign_link').addClass('hide');
                //$('#id_edit_link, #id_move_link').addClass('hide');
                //$('#id_close_link, #id_reactive_link, #id_reopen_link').addClass('hide');
                //$( '#id_edit_description' ).addClass( 'hide' );
                obj.find('span:[id^=id_resolve_], span:[id^=id_assign_], span:[id^=id_edit_], span:[id^=id_move_]').addClass('hide');
                obj.find('span:[id^=id_close_], span:[id^=id_reactive_], span.reopen_').addClass('hide');
                if (status == 'Closed') {
                    $('#id_comment_link').addClass('hide');
                }
            }
        };

        timeControl = function (obj, current_user) {
            var assigned = obj.parent().find('span[id^=id_assigned_to_]').attr('val');
            if (current_user == assigned ) {
                obj.find('span:[id^=id_resolve_], span:[id^=id_time_]').removeClass('hide');
            } else {
                obj.find('span:[id^=id_resolve_], span:[id^=id_time_]').addClass('hide');
            }
        };
        
        
        $.each($( 'div.story_controls' ), function() {
            var obj = $(this),
            status = obj.attr('val'),
            usr = obj.attr( 'usr' );
            updateStoryControls_(obj, status, usr);
            timeControl(obj, current_user);
        });
        
        function include(array, value) {
            return ($.inArray(value, array) != -1);
        }
        
        updateItCtrls = function ( obj, status ) {
            
            if ( status == 'Inactive') {
                obj.find('span.it_close_, span.it_reactive_').addClass('hide');
                obj.find('span.it_start').removeClass('hide');
            } else {
                if ( status == 'Active' ) {
                    obj.find('span.it_start_, span.it_reactive_').addClass('hide');
                    obj.find('span.it_close_').removeClass('hide');
                } else {
                    obj.find('span.it_start_, span.it_close_').addClass('hide');
                    obj.find('span.it_reactive_').removeClass('hide');
                }
            }
        };

        $('.it_control').each(function(){
            var status = $(this).attr('val');
            updateItCtrls($(this), status);
        });

        var methos = {
            update_assigned: function(data) {
                $('#id_assigned_to_' + data.id).text(data.assigned_to);
                $('#id_assigned_to_' + data.id).attr('val', data.assigned_to);
                var obj = $('#id_str_ctrl'+data.id);
                updateStoryControls_(obj, data.status, 'True');
                timeControl(obj, current_user);
            },
            change_status_m: function(data) {
                $('#id_status_' + data.id).text(data.status);
                updateStoryControls_($('#id_str_ctrl'+data.id), data.status, 'True');
            },
            update_time: function( data ) {
                $("#id_pb_"+data.id).progressbar({value: data.percentage});
            }
        };
        
        addCallBackMethods(methos);
    });
</script>

{% endblock %}
